<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
    <div class="mt-list-container mini">
        <div class="ui-mode-box body" id="container" ref="scroll">
            <div class="flex-col align-center">
                <div class="font24 gray line1 mar-top-10">
                    <span>您当前的地址：</span>
                    <span>{{addr}}</span>
                </div>
                <div class="mar-top32 line1">
                    <span  class="change-btn" @touchstart.stop @click="GetBtn">获取当前定位</span>
                    <span  class="change-btn" @touchstart.stop @click="changeBtn">修改当前定位</span>
                </div>
                <div class="font30 mar-top32 line1">为您推荐附近的门店</div>
		    </div>
            <template>
                <div class="relative agent-list">
                    <div class="agent-item"
                        :key="`agent-${i}`"
                        v-for="(item,i) in list"
                    >
                        <div class="agent-range gradient brown">{{item.agent_remark_004}}</div>
                        <div class="font30 line1">{{item.agent_name}}</div>
                        <div class="font30 line2  mar-top32 mt-flex mt-flex-center mt-flex-align-top">
                            <span class="mt-flex-shrink ">门店地址：</span>
                            <span class="align-left">{{item.agent_addr}}</span>
                        </div>
                        <div class="big-btn gradient" @touchstart.stop @click="changeAgent(item)">进入门店</div>
                    </div>
                    <div v-if="isScrolling" class="flex1 flex-row align-center scrolling-content relative">
                        <span class="icon">
                            <bsx-loading master-background="rgba(0,0,0,0)" box-background="rgba(0,0,0,0)" :size="35" :show-text="false"></bsx-loading>
                        </span>
                        <span class="text">努力加载中...</span>
                    </div>
                    <div v-else-if="isLoadEnded" class="flex1 flex-row align-center scrolling-content relative">已经到底啦~~</div>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import mixinList from '@/views/content/mixins/list';
export default {
    name: 'my/agent/content',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            currentPage:0,
            pageSize:10,
            addr:this.$route.query.addr||''
        };
    },
    props:{
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinList,
    ],
    computed:{
    },
    watch:{
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 获取列表数据
		getListInfo({flag,page,callback}){
            this.getPageInfo({
                name:'home.agentList',
                param:{
                    invoke_method:'public_page_4m_load_agent_list',
                    is_online: 0,
                    agent_type_4_use:20,
                    pre_db_para_begin_idx:page*this.pageSize,
                    pre_db_para_length_4_list:this.pageSize
                }
            }).then(({result,response})=>{
                if(page==0){
                    this.list=[];
                }
                if(result.page_content&&result.page_content.length){
                    this.list.push(...result.page_content);
                    this.currentPage=page;
                    if(result.page_content.length<this.pageSize){
                        this.isLoadEnded=true;
                    }else if((this.currentPage+1)*this.pageSize>=parseInt(result.result_num)){
                        this.isLoadEnded=true;
                    };
                    callback&&callback();
                }else{
                    if(flag){
                        this.showResult('没有查询到相关数据');
                    }else{
                        this.showToast('没有查询到相关数据',false);
                    };
                    callback&&callback();
                };
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
		},
        GetBtn(){
            this.t1=window.setTimeout(this.change, 10000*2);
            this.type="";
            this.loading=this.$$loading({
                showText:'请稍等'
            });
            this.getCurLocation()
        },
        getCurLocation(){
            var geolocation = new qq.maps.Geolocation();
            var options = {timeout: 9000};
            geolocation.getLocation(this.showPosition, this.showErr, options);
        },
        showPosition(res){
            window.clearTimeout(this.t1);
            this.addr=res.province+res.city
            this.getUserID().then((result)=>{
                this.sendlocation(result.id_public_user_info,res.lat,res.lng).then(({result,response})=>{
                    this.loading&&this.loading.close();
                    this.getListInfo({
                        flag:true,
                        page:0
                    });
                }).catch(({msg})=>{
                    this.showMessage(msg,false);
                });
            }).catch(({msg})=>{
                this.showMessage(msg,false);
            });
        },
        showErr(){
            if(this.type==1){
                this.showPosition();
            }else{
                this.getCurLocation();
            }
        },
        change(){
            this.type=1
        },
        changeBtn(){
            var url = window.location.href;
			window.location.href="https://apis.map.qq.com/tools/locpicker?search=1&type=0&key=XO4BZ-YYWLX-R4A4U-TBW3R-2GS3S-PEFD4&referer=精灵兔&backurl="+url
        },
        // 切换门店
        changeAgent(item){
            this.$http.post({
                name:'home.changeAgent',
                data:{
                    invoke_method:'public_page_4a_login_jump',
                    jump_type:999,
                    id_public_agent_info:item.id_public_agent_info,
                    pre_cmd_para_pass_way_type:'only_cookie',
                },
                loading:{
                    enabled:false
                }
            }).then(({result,response})=>{
                this.$router.replace({
                    path:'/'
                });
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
        },
        // 修改用户地址信息
        sendlocation(userId,lat,lng){
            return new Promise((resolve,reject)=>{
                this.$http.post({
                    name:'my.user.info',
                    data:{
                        invoke_method:'change_user_info',
                        pre_db_para_id_public_user_info: userId,
                        add_latitude: lat,
                        add_longitude: lng,
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    resolve({result,response});
                }).catch(({msg})=>{
                    reject({msg});
                });
            });
		},
        getUserID(){
            return new Promise((resolve,reject)=>{
                let public_agent_info=this.$store.state.global.public_agent_info,
                    public_user_info=this.$store.state.global.public_user_info;
                if(public_agent_info&&public_user_info){
                    console.log(public_user_info)
                    resolve(public_user_info);
                }else{
                    this.$http.post({
                        name:'my',
                        data:{
                            invoke_method:'user_and_shop_info'
                        }
                    }).then(({result,response})=>{
                        public_user_info=result.public_user_info
                        console.log(public_user_info)
                        resolve(public_user_info);
                    });
                };
            });
        },
        // 请求失败刷新函数
        handleRefresh(){
            this.currentPage=0;
            this.isScrolling=false;
            this.isLoadEnded=false;
            this.list=[];
            this.getListInfo({
                flag:true,
                page:0
            });
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-list-container{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    .body{
        overflow-x:hidden;
        overflow-y:auto;
		line-height:1.2em;
        .mar-top-10 {
            margin-top: 1rem !important;
        }
        .font30{
            font-size:.8rem;
        }
        .line1 {
            line-height: 1;
        }
        .line2{
            line-height: 2rem;
        }
        .mar-top32 {
            margin-top: 0.8rem;
        }
        .change-btn {
            margin-left: 0.8rem;
            display: inline-block;
            width: 4rem;
            height: 1.5rem;
            line-height: 1.5rem;
            border: solid 1px #ecb419;
            border-radius: 0.7rem;
            color: #ecb419;
            font-size: 0.6rem;
            text-align: center;
            padding: 0;
            background: none;
            vertical-align: middle;
        }
        .agent-item {
            background: #fff;
            padding: 0.8rem 0;
            margin: 0.8rem 0.8rem 0;
            text-align: center;
            .agent-range {
                width: 5.2rem;
                height: 1.5rem;
                line-height: 1.5rem;
                border-radius: 0 0.8rem 0.8rem 0;
                font-size: 0.6rem;
                text-align: left;
                color: #fff;
            }
            .big-btn {
                height: 2.1rem;
                line-height: 2.1rem;
                font-size: 0.8rem;
                width: 100%;
                margin-top: 1rem;
                color: #fff;
            }
        }
    }
}
</style>
